<template>
	<view class="basic-information">
		<view class="basic-content">
			<view class="basic-information-title">
				<view class="line"></view>
				<view class="title-text">采伐地点</view>
			</view>
			<view class="form-box">
				<!-- label-position="top" -->
				<uni-forms class="customForm" ref="customForm" :modelValue="loggingFromData">
					<picker @change="bindPickerChange($event, 1)" :value="loggingFromData.townIndex" :range="regions"
						:range-key="'name'" class="picker-view">
						<uni-forms-item class="form-item" label="乡镇(场)：" required name="townName">
							<uni-easyinput v-model="loggingFromData.townName" placeholder="请选择" :readonly="true"
								:disabled="true" />
							<view class="dw">
								<uni-icons type="right" size="24" color="rgba(51, 51, 51, 0.4)"></uni-icons>
							</view>
						</uni-forms-item>
					</picker>

					<picker @change="bindPickerChange($event, 2)" :value="loggingFromData.regionIndex" :range="regions2"
						:range-key="'name'" class="picker-view">
						<uni-forms-item class="form-item" label="村委会(工区)：" required name="regionName">
							<uni-easyinput v-model="loggingFromData.regionName" placeholder="请选择" :readonly="true"
								:disabled="true" />
							<view class="dw">
								<uni-icons type="right" size="24" color="rgba(51, 51, 51, 0.4)"></uni-icons>
							</view>
						</uni-forms-item>
					</picker>

					<uni-forms-item class="form-item" label="村民小组：" required name="villagerGroup">
						<uni-easyinput v-model="loggingFromData.villagerGroup" placeholder="请输入" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="地点名：" required name="address">
						<uni-easyinput v-model="loggingFromData.address" placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="basic-information-title">
				<view class="line"></view>
				<view class="title-text">申请人</view>
			</view>
			<view class="ID">
				<view class="ID-title">
					<view class="ID-f">*</view>
					<view class="ID-t">上传身份证</view>
				</view>
				<view class="shangchuan">
					<view class="shangchuan-item shangchuan-item1">
						<uni-file-picker ref="files" v-model="fileListArr" fileMediatype="image" limit="1" title=""
							@select="select" @progress="progress" @success="success" @fail="fail">
							<view class="files-img"></view>
						</uni-file-picker>
						<view class="files-text">国徽面</view>
					</view>
					<view class="shangchuan-item shangchuan-item2">
						<uni-file-picker ref="files" v-model="fileListArr" :auto-upload="false" fileMediatype="image"
							limit="1" title="" @select="select2" @progress="progress" @success="success" @fail="fail">
							<view class="files-img"></view>
						</uni-file-picker>
						<view class="files-text">人像面</view>
					</view>
				</view>
			</view>
			<view class="form-box">
				<uni-forms class="customForm" ref="customForm2" :modelValue="loggingFromData" label-position="top">
					<uni-forms-item class="form-item" label="姓名：" required name="idCardName">
						<uni-easyinput v-model="loggingFromData.idCardName" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="身份证号码：" required name="idCardNo">
						<uni-easyinput v-model="loggingFromData.idCardNo" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="身份证住址：" name="idCardAddress">
						<uni-easyinput v-model="loggingFromData.idCardAddress" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="手机号码：" required name="phoneNumber">
						<uni-easyinput v-model="loggingFromData.phoneNumber" placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="tishi">申请人无不良征信记录，可以前往信用中国网站进行查验</view>
		</view>
		<view class="inform-btn">
			<button class="long-radius-btn sumit-btn" @click="leeBtnClickD">
				下一步
			</button>
		</view>
	</view>
</template>

<script>
	// import {
	//   queryRegionListByLevel,
	//   checkIdCard,
	//   uploadFile,
	// } from "../../http/api.js";
	// import {
	//   debounced,
	//   throttle,
	// } from "../../components/leejs_debounced_throttle.js";
	// import ajax from "../../http/index.js";
	export default {
		data() {
			return {
				loggingFromData: {
					townRno: null,
					townName: null,
					rno: null,
					regionName: null,
					villagerGroup: null, //村民小组
					address: null, // 地点名
					idCardName: null, //姓名
					idCardNo: null, //身份证号
					idCardAddress: null, // 身份证地址
					phoneNumber: null, //手机号码
				},
				regions: [],
				regions2: [],
				fileListArr: [],
				idCardFront: [],
				idCardBack: [],
				visitorRules: {
					// 添加表单的校验规则
					townName: {
						rules: [{
							required: true,
							errorMessage: "请选择乡镇(场)",
						}, ],
					},
					regionName: {
						rules: [{
							required: true,
							errorMessage: "请选择村委会",
						}, ],
					},
					villagerGroup: {
						rules: [{
							required: true,
							errorMessage: "请输入村民小组",
						}, ],
					},
					address: {
						rules: [{
							required: true,
							errorMessage: "请输入地点名",
						}, ],
					},
					idCardName: {
						rules: [{
							required: true,
							errorMessage: "请输入姓名",
						}, ],
					},
					idCardNo: {
						rules: [{
								required: true,
								errorMessage: "请输入身份证号",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
										callback("身份证格式有误");
										return true;
									}
								},
							},
						],
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: "请填写手机号码",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
										callback("手机号格式有误");
										return true;
									}
								},
							},
						],
					},
				},
			};
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.customForm.setRules(this.visitorRules);
				this.$refs.customForm2.setRules(this.visitorRules);
			});
		},
		onLoad(res) {
			this.regions = this.$store.state.RegionList
		},
		methods: {
			async leeBtnClickD() {
				const validationPromises = this.$refs.customForm.validate().then((formValid) => {
					return formValid;
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						icon: "error",
						title: `${err[0].errorMessage}`,
					});
					return false;
				});
				const validationPromises2 = this.$refs.customForm2.validate().then((formValid) => {
						return formValid;
					})
					.catch((err) => {
						console.log(err);
						uni.showToast({
							icon: "error",
							title: `${err[0].errorMessage}`,
						});
						return false;
					});
				const validationResults = await Promise.all([validationPromises, validationPromises2, ]);
				const allVisitorsValid = validationResults.every((valid) => valid);
				if (allVisitorsValid) {
					if (this.idCardFront.length && this.idCardBack.length) {
						const {
							townName,
							townRno,
							rno,
							regionName,
							villagerGroup,
							address,
							idCardName,
							idCardNo,
							idCardAddress,
							phoneNumber
						} = this.loggingFromData
						this.$store.commit('saveData', {
							field: 'globalVariable',
							value: {
								townName,
								townRno,
								rno,
								regionName,
								villagerGroup,
								address,
								idCardName,
								idCardNo,
								idCardAddress,
								phoneNumber,
								idCardFront: this.idCardFront[0],
								idCardBack: this.idCardBack[0],
							},
							keep: true,
						})
						this.nextstep();
					} else {
						uni.showToast({
							icon: "error",
							title: "请上传身份证",
						});
					}
				}
			},
			onpopupclosed(e) {
				console.log(e);
			},
			select(e) {
				console.log(e);
				this.upType = "img";
				let arrObj = e.tempFiles.slice();
				if (e.tempFiles.length) {
					e.tempFiles.forEach((item) => {
						this.uploadImgVideo(arrObj, 1);
					});
				}
			},
			select2(e) {
				console.log(e);
				this.upType = "img";
				let arrObj = e.tempFiles.slice();
				if (e.tempFiles.length) {
					e.tempFiles.forEach((item) => {
						this.uploadImgVideo(arrObj, 2);
					});
				}
			},
			// 上传图片或视频
			async uploadImgVideo(tempFilePaths, type) {
				let hz = tempFilePaths[0].extname;
				let file = tempFilePaths[0];
				let rs = await this.muajax.dfsUploadFiles({}, {
					filePath: file.path,
					name: 'files'
				})
				console.log(rs.appendixList)
				if (rs.code == '0000') {
					if (type == 1) {
						this.idCardFront = rs.appendixList;
					} else {
						this.idCardBack = rs.appendixList;
					}
					if (this.idCardFront.length && this.idCardBack.length) {
						this.checkIdCardlist();
					}
				}
			},
			async checkIdCardlist() {
				let res = await this.muajax.checkIdCard({
					idCardFront: this.idCardFront[0],
					idCardBack: this.idCardBack[0],
				})
				if (res.code == "0000") {
					this.loggingFromData.idCardName = res.idCardInfo.name;
					this.loggingFromData.idCardNo = res.idCardInfo.idNumber;
					this.loggingFromData.idCardAddress = res.idCardInfo.address;
				} else {
					uni.showToast({
						icon: "error",
						title: res.message,
						duration: 1000,
					});
				}
			},
			async bindPickerChange(e, type) {
				if (type == 1) {
					this.loggingFromData.townRno = this.regions[e.detail.value].rno;
					this.loggingFromData.townName = this.regions[e.detail.value].name;
					console.log(this.loggingFromData.townName)
					this.loggingFromData.regionName = null;
					this.loggingFromData.rno = null;
					let res = await this.muajax.queryRegionListByLevel({
						pNo: this.regions[e.detail.value].rno,
						levelId: 3,
					})
					if (res.code == "0000") {
						this.regions2 = res.regions.map((item) => {
							item.name = item.rname;
							return item;
						});
					}
				} else {
					this.loggingFromData.rno = this.regions2[e.detail.value].rno;
					this.loggingFromData.regionName = this.regions2[e.detail.value].name;
				}
			},
			nextstep() {
				uni.navigateTo({
					url: "/pages/logging/logging",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	:deep().uni-forms-item.is-direction-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: initial;
		// box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(70, 70, 70, 0.1);
		border-radius: 0;
	}

	:deep().uni-forms-item__content {
		display: flex;
		align-items: center;
		justify-content: right;
	}

	:deep().uni-data-tree {
		text-align: right;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: rgba(51, 51, 51, 0.5);
	}

	:deep().uni-forms-item .is-required {
		color: rgba(255, 0, 0, 1);
		margin-right: 6rpx;
	}

	:deep().is-input-border {
		border: none;
	}

	:deep().uni-easyinput__content-input {
		padding: 0 28rpx;
		text-align: right;
		color: #333 !important;
		font-size: 32rpx;
	}

	:deep().uni-easyinput__placeholder-class {
		font-size: 33rpx;
	}

	:deep().uni-file-picker__container {
		height: 100%;

		.icon-add {
			display: none;
		}
	}

	:deep().uni-file-picker {
		height: 100%;
	}

	:deep().uni-file-picker__header {
		display: none;
	}

	:deep() {
		.uni-forms-item__label {
			width: auto !important;
			height: auto;
			font-size: 33rpx !important;
			padding: 0 !important;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 33rpx;
			color: rgba(51, 51, 51, 1);
		}

		.uni-forms-item {
			background: #ffffff;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			border-bottom: 1px solid #f1f1f1;
			margin-bottom: 0px;
			height: 115rpx;
		}

		.uni-forms-item__error {
			display: none;
		}

		.content-clear-icon {
			display: none;
		}
	}

	.select-color {
		color: rgba(0, 0, 0, 0.9) !important;
	}

	.basic-information {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow-y: auto;
		background-color: rgba(248, 248, 248, 1);

		.basic-information-title {
			height: 92rpx;
			background-color: rgba(230, 248, 242, 1);
			display: flex;
			align-items: center;
			padding: 0 31rpx;

			.line {
				width: 8rpx;
				height: 40rpx;
				background: #2cc396;
				border-radius: 4rpx;
				margin-right: 25rpx;
			}

			.title-text {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 38rpx;
				color: #2cc396;
			}
		}

		.ID {
			height: 385rpx;
			background: #ffffff;
			margin-bottom: 24rpx;

			.ID-title {
				padding: 35rpx 29rpx;
				display: flex;
				align-items: center;

				.ID-f {
					color: rgba(255, 0, 0, 1);
					font-size: 33rpx;
					margin-right: 10rpx;
				}

				.ID-t {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 33rpx;
					color: rgba(51, 51, 51, 1);
				}
			}

			.shangchuan {
				padding: 0 29rpx;
				display: flex;
				// height: 68%;
				height: 211rpx;
				justify-content: space-between;

				.shangchuan-item {
					width: 48%;
					height: 100%;

					.files-text {
						text-align: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 29rpx;
						color: #333333;
						margin-top: -10rpx;
					}
				}

				.shangchuan-item1 {
					:deep().file-picker__box {
						width: 100% !important;
						height: 100% !important;
						background-image: url(~@/static/caifa/guohui.png);
						background-size: cover;
					}
				}

				.shangchuan-item2 {
					:deep().file-picker__box {
						width: 100% !important;
						height: 100% !important;
						background-image: url(~@/static/caifa/renxiang.png);
						background-size: cover;
					}
				}
			}
		}

		.files-img {
			width: 98rpx;
			height: 98rpx;
			background-image: url(~@/static/caifa/paizhao.png);
			background-size: cover;
		}

		.basic-content {
			flex: 1;
			overflow: auto;
		}

		.form-box {
			padding: 0 32rpx;
			background-color: #ffffff;
			margin-bottom: 32rpx;
		}

		.tishi {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: rgba(51, 51, 51, 0.5);
			line-height: 42rpx;
			padding: 0 28rpx;
			margin-bottom: 32rpx;
		}

		.inform-btn {
			box-shadow: 0rpx -4rpx 19rpx 0rpx rgba(70, 70, 70, 0.1);
			padding: 32rpx 41rpx 32rpx;

			.checkbox {
				padding: 18rpx 0 25rpx 10rpx;
			}

			.long-radius-btn {
				width: 100%;
				// line-height: 92rpx;
				text-align: center;
			}

			.sumit-btn {
				background: rgba(44, 195, 150, 1);
				border-radius: 46rpx;
				color: #fff;
			}
		}
	}

	:deep().is-disabled {
		background-color: #fff !important;
		// color: red !important;
	}

	:deep() .is-disabled .uni-easyinput__placeholder-class {
		color: #999 !important;
		font-size: 16px !important;
	}

	:deep() input[disabled] {
		// color: red !important;
	}

	.uni-easyinput__content-input {}
</style>